<template>
    <div>
        <el-row>
            <el-col :span="12">
                <div class="grid-content">
                    <el-row style="margin-bottom:40px">
                        <el-col :span="4">
                            <span class="textstyle">用户名：</span>
                        </el-col>
                        <el-col :span="20">
                            <el-input
                                size="100px"
                                :disabled="true"
                                v-model="user.username">
                                <!-- {{userInfo.cname}} -->
                            </el-input>
                        </el-col>
                    </el-row>

                    <el-row style="margin-bottom:40px">
                        <el-col :span="4">
                            <span class="textstyle">真实姓名：</span>
                        </el-col>
                        <el-col :span="20">
                            <el-input
                                size="100px"
                                v-model="user.cname">
                                <!-- {{userInfo.cname}} -->
                            </el-input>
                        </el-col>
                    </el-row>

                    <el-row style="margin-bottom:40px">
                        <el-col :span="4">
                            <span class="textstyle"> 邮 箱：</span>
                        </el-col>
                        <el-col :span="20">
                            <el-input
                                size="100px"
                                v-model="user.email">
                                <!-- {{userInfo.email}} -->
                            </el-input>
                        </el-col>
                    </el-row>
                    <el-row style="margin-bottom:40px">
                        <el-col :span="4">
                            <span class="textstyle"> 性 别：</span>
                        </el-col>
                        <el-col :span="20">
                
                            <el-select v-model="user.sex" placeholder="请选择" style="width:100%"  >
                            <el-option 
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                           
                            <!-- <el-input
                                size="100px"
                                v-model="user.sex"> -->
                                <!-- {{userInfo.sex}} -->
                            <!-- </el-input> -->
                        </el-col>
                    </el-row>
                    <el-row style="margin-bottom:40px">
                        <el-col :span="4">
                            <span class="textstyle"> 电话号码</span>
                        </el-col>
                        <el-col :span="20">
                            <el-input
                                size="100px"
                                v-model="user.phoneNum">
                                <!-- {{userInfo.phoneNum}} -->
                            </el-input>
                        </el-col>
                    </el-row>
                    <el-row style="margin-bottom:40px">
                        <el-col :span="4">
                            <span class="textstyle"> 创建时间：</span>
                        </el-col>
                        <el-col :span="20">
                            <el-input
                                size="100px"
                                :disabled="true"
                                v-model="user.createTime">
                                <!-- {{user.createTime}} -->
                            </el-input>
                        </el-col>

                    <el-button type="warning" @click="changeUserInfo" round class="buttonstyle">立即修改</el-button>                                

                    </el-row>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="grid-content">
                   <div class="app-main-content" >
                        <user-img class="imgstyle" id="avatarCrop" ref="cropper"></user-img>
                            <div style="margin-top:140px;margin-left:125px">
                               
                            </div>
                        </div>
                </div>
            </el-col>
        </el-row>

    </div>
</template>

<script>
import $ from 'jquery'
import {mapState} from 'vuex'
import UserImg from '../userImg/userImg.vue' 
import axios from 'axios'

    export default {
        components: {
            UserImg,
        },
        created(){
        // this.$store.dispatch('getUserInfo')
        },
        data(){
            return{
                 

options: [{
          value: '男',
          label: '男'
        }, {
          value: '女',
          label: '女'
        },]


            }
        },
        computed:{
            ...mapState({
                'user': (state) => state.user,
            })
        },
        methods:{
            changeUserInfo(){
                this.$store.dispatch('editUser')
            },
            postImg(){
                 $.ajax({
                    type: 'post',
                    url: 'http://210.41.45.4/jxfl/upload/uploadBase64',
                    dataType: 'json',
                    async: false,
                    data: {
                        base64: this.user.imgUrl,
                        number: '000000'
                    },
                    success: function (res) {
                        console.log(res)
                    },
                    error:function(timeout,error,notmodified){
                        console.log(error)
                    }
                    
                });


            }
        }
    }
</script>

<style lang="stylus">



.width{
    width: 400px
}


.grid-content{
    height 800px
    margin-top 48px 
    // margin-bottom auto  
}
.textstyle{
    display inline-block
    background-color #f5f7fa
    text-align center
    font-size 14px
    width 95%
    height 38px
    line-height 40px
    margin-left 20px
    border 1px solid #dcdfe6
    border-radius:4px
}
.imgstyle{
    position relative
    top:0px
    left:50%
    width: 300px
    height 300px
    border-radius:50%
    margin-left :-150px
}
.buttonstyle{
    position relative
    // background-color :#e95b3a
    color #fff
    top:0px
    left:50%
    margin-left :-45px
    margin-top 30px
}
// .el-input.is-disabled .el-input__inner{
//     background-color: #ffffff
// }
</style>